/*
 * @Author: YuanSong
 * @Date: 2021-11-30 20:25:11
 * @Last Modified by: YuanSong
 * @Last Modified time: 2021-12-03 16:26:01
 */
import React from "react";
import showpassword from "@/assets/icons/showpassword.svg";
import hidepassword from "@/assets/icons/hidepassword.svg";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { IGlobalReduceState } from "@/redux/reducers/global";
import { connect } from "react-redux";
import { AppState } from "@redux/reducers";
import { requestLoginRegister } from "@redux/actions/user";
import { bindActionCreators } from "redux";
import {REG_PHONE,REG_PASSWORD} from "@utils/regExps";
import store from "store";
import { THEMES } from "@/store/constants";

type IProps = RouteComponentProps  & IGlobalReduceState  & {
  requestLoginRegister:typeof requestLoginRegister;
};
class LoginBox extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
    this.loginRegister = this.loginRegister.bind(this);
  }
  readonly state = {
    pwdHidden: true,
    passwordLogin: {
      phoneNo: "",
      password: "",
    },
  };
  tranColor(title: string, value: string) {
    document.getElementsByTagName("body")[0].style.setProperty(title, value);
  }
  private loginRegister() {
    const { passwordLogin } = this.state;
    if (!passwordLogin.phoneNo || !passwordLogin.password) {
        alert('信息不全');
      } else if (!REG_PHONE.test(passwordLogin.phoneNo)) {
        alert('手机号格式不正确');
      } 
      // else if (!REG_PASSWORD.test(passwordLogin.password)) {
      //   alert(
      //     '密码规则:至少8-16个字符，至少1个大写字母，1个小写字母和1个数字'
      //   );
      // } 
      else {
        this.props.requestLoginRegister(passwordLogin, (theme) => {
          document.getElementsByClassName("App")[0].className = "App " + theme;
        //改变主题颜色
        let themeGather = store.get(THEMES);
        this.tranColor("--foreground-color", themeGather[theme].foregroundColor);
        this.tranColor("--span-color", themeGather[theme].spanColor);
        this.tranColor("--sub-span-color", themeGather[theme].subSpanColor);
        this.tranColor("--background-color", themeGather[theme].backgroundColor);
        this.tranColor(
          "--button-background-color",
          themeGather[theme].buttonBackgroundColor
        );
        this.tranColor(
          "--button-hover-background-color",
          themeGather[theme].buttonHoverBackgroundColor
        );
        this.tranColor("--button-color", themeGather[theme].buttonColor);
        this.tranColor("--border-color", themeGather[theme].borderColor);
        this.tranColor(
          "--matted-span-color",
          themeGather[theme].mattedSpanColor
        );
        this.tranColor(
          "--navigation-background-color",
          themeGather[theme].navigationBackgroundColor
        );
        this.tranColor(
          "--navigation-active-background-color",
          themeGather[theme].navigationActiveBackgroundColor
        );
        this.tranColor(
          "--navigation-hover-background-color",
          themeGather[theme].navigationHoverBackgroundColor
        );
          this.props.history.goBack();
        });
      }
  }
  render() {
    return (
      <div className="LoginBox-Wrapper">
        <div className="left"></div>
        <div className="normalLoginTab box">
          <div className="login-tab clear">
            <div className="item float-left active">账号密码登录</div>
            <div className="item float-right">验证码登录</div>
          </div>
          <div className="login-form">
            <div className="input-container">
              <input
                value={this.state.passwordLogin.phoneNo}
                onChange={({ target }) => {
                  this.setState({
                    passwordLogin: {
                      phoneNo: target.value,
                      password: this.state.passwordLogin.password,
                    },
                  });
                }}
                className="type1-Input"
                placeholder="请输入手机号"
              ></input>
            </div>
            <div className="input-container" style={{ marginBottom: "54px" }}>
              <input
                value={this.state.passwordLogin.password}
                onChange={({target}) => {
                  this.setState({
                    passwordLogin: {
                      phoneNo: this.state.passwordLogin.phoneNo,
                      password: target.value,
                    },
                  });
                }}
                className="type1-Input"
                placeholder="请输入密码"
                type={this.state.pwdHidden ? "password" : "text"}
              ></input>
              {this.state.pwdHidden ? (
                <img
                  src={showpassword}
                  className="SVG-password"
                  alt="showpassword"
                  onClick={() => {
                    this.setState({ pwdHidden: false });
                  }}
                />
              ) : (
                <img
                  src={hidepassword}
                  className="SVG-password"
                  alt="hidepassword"
                  onClick={() => {
                    this.setState({ pwdHidden: true });
                  }}
                />
              )}
            </div>
            <div className="Button type1-Button" onClick={this.loginRegister}>
              <span>登录</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(
  (state: AppState) => state.global,
  (dispatch) => {
    bindActionCreators(
      {
        requestLoginRegister
      }, 
      dispatch);
  }
)(withRouter(LoginBox));
